//待办事项标准模式
<template>
    <ul class="ls" v-if="todoData.length > 0">
        <li v-for="(item,key) in todoData" :key="key">
            <div class="ws-backlog-block">
                <div class="ws-backlog-block-head">
                    <img
                        class="ws-tubiao"
                        src="@/assets/btn/daiban.png"
                    />
                    <span class="ws-title" :title="item.billName">{{
                        item.billName
                    }}</span
                    ><span class="ws-more" v-if="isDone == 1">{{
                        item.state === 'Todo' ? '审核中' : '未读'
                    }}</span>
                    <span class="ws-more" v-else>{{
                        item.state === 'Todo' ? '审核中' : '已审核'
                    }}</span>
                </div>
                <a
                    href="####"
                    class="ws-backlog-block-orgName"
                    :title="item.orgName"
                    >{{ item.orgName }}</a
                >
                <div class="ws-backlog-block-content">
                    {{item.taskDescription}}
                </div>
                <div class="ws-backlog-block-bottom">
                    <span style="margin-left: 5px">
                        {{ item.notifyTime }}
                    </span>
                    <div class="ws-right">
                        <a
                            @click="onShowAudit(item)"
                            class="l-button ws-blue"
                            size="mini"
                            v-if="isDone == 1"
                            >审核</a
                        >
                        <a class="l-button" @click="openDetail(item)"
                            >详情</a
                        >
                    </div>
                </div>
            </div>
        </li>
    </ul>
    <div class="no_date" v-else>暂无信息</div>
</template>
<script>
import { mapState } from 'vuex'
import { showLoading, hideLoading, openAppClient } from '@/utils/common'
// import { mapState } from 'vuex'
import publics from '@/api/settlementManagement/equipmentBilling/public'
import request from '@/api/todo/todo.js'
export default {
    name: 'todoListNormal',
    components: {
    },
    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
        }),
    },
    data () {
        return {
            loading: false,
            searchKey: '',
            tabActive: '0',
            curRow: null,
            todoData: [
                // {
                //     orgName: '四川路桥',
                //     taskDescription:
                //         '四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司四川宜宾公路铁路海外分公司',
                //     billName: '庐江大桥',
                //     notifyTimeStr: '预警'
                // },
                // {
                //     orgName: '四川路桥',
                //     taskDescription: '四川公路铁路海外公司',
                //     billName: '庐江大桥',
                //     notifyTimeStr: '预警'
                // },
                // {
                //     orgName: '四川路桥',
                //     taskDescription: '四川公路铁路海外公司',
                //     billName: '庐江大桥',
                //     notifyTimeStr: '预警'
                // },
                // {
                //     orgName: '四川路桥',
                //     taskDescription: '四川公路铁路海外公司',
                //     billName: '庐江大桥',
                //     notifyTimeStr: '预警'
                // },
                // {
                //     orgName: '四川路桥',
                //     taskDescription: '四川公路铁路海外公司',
                //     billName: '庐江大桥',
                //     notifyTimeStr: '预警'
                // }
            ],
            todoDataBack: [], // 待办列表备份，供搜索
            doneDataBack: [], //已办列表备份，供搜索
            todoSelect: [], // 待办选择列表
            auditType: '', // 审核状态：待办单项todoSingle 待办批量todoAll
            doneData: [],
            pageIndex: 1,
            pageSize: 10,
            doneNum: 500, // 已办条数
            undoSelect: [], // 已办选择列表
            isAuditVisible: false,
            userInfoLocal: null,
            radio: 1,
            str1: 1,
            a1: '',
            model: '切换到列表模式',
            todoUpcomingData: [], // 待办-待办
            todoDoneData: [], // 待办-已办
            tableHeight: 0,
            totalPage: 0, //总页数
            query: {
                limit: 10,
                page: 1
            },
            auditParams: {
                billId: '',
                billType: '',
                freeNextUnitIndex: null,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: '',
                orgId: '',
                orgName: '',
                userId: '',
                workId: ''
            },
            billTypes: [], //每个模块的billtype
            pagination: {   //已办分页
                'appId': 'WEB',
                'filter': {
                    'billClass': 1,
                    'endDate': '',
                    'firstRecord': 0,
                    'nameLike': '',
                    'pageIndex': 1,
                    'pageSize': 20,
                    'sortFields': '',
                    'startDate': ''
                },
                'userId': ''
            },
            paginationTodo: {  //待办分页
                'appId': 'WEB',
                'limit': 20,
                'page': 1,
                'taskClass': '',
                'user': ''
            },
        }
    },
    props: {
        showType: {
            type: Boolean
        },
        isDone: {   // 1待办 2已办
            type: Number
        },
        search: {
            type: String
        }
    },
    watch: {
        //监听是待办还是已办
        isDone: function (newVal) {
            this.setEmpty()
            newVal == 1 ? this.getTodo() : this.getDone()
            //监听已办
            if(!this.showType && newVal == 2) {
                console.log('gggggg')
                window.addEventListener('scroll', this.lazyLoading)
            }
        },
        //监听是标准模式还是列表模式
        showType: function (newVal) {
            if(newVal) {
                //列表模式
                //this.setTableHight()
                // if(this.isDone == 1) {
                //     this.gettodotaskspage()
                // }else{
                //     this.getTodo()
                // }
            }
            console.log('jjjjj', newVal)
            if(!newVal && this.isDone == 2) {
                console.log('gggffffffffffggg')
                window.addEventListener('scroll', this.lazyLoading)
            }
        },
        search: function (newVal) {
            this.searchKey = newVal
        }
    },
    created () {
        this.paginationTodo.user = this.userInfo.userId
        if(this.isDone == 1) {
            this.getTodo()  //待办
        }else{
            this.getDone()  //已办
        }
        //监听已办
        // if(!this.showType && this.isDone == 2) {
        //     console.log('gggfffffgggggfffffggg')
        //     window.addEventListener('scroll', this.lazyLoading)
        // }
    },
    mounted () {
        this.setTableHight()
    },
    //页面离开后销毁，防止切换路由后上一个页面监听scroll滚动事件会在新页面报错问题
    destroyed () {
        console.log('ffffgggggff')
        window.removeEventListener('scroll', this.lazyLoading)
    },
    methods: {
        //过滤数据
        filterFn (arr, serchArr, key) {
            if(serchArr.length == 0) { //如果是空数组  就返回全部数据
                return arr
            }else{
                return serchArr.map(v => {
                    return arr.filter(item => {
                        return item[key] === v
                    })
                }).flat()
            }
        },
        //模块
        getModule (name) {
            switch(name) {
            case '0': //全部
                this.billTypes = []
                break
            case '1': //收支合同
                this.billTypes = ['7019', '7020', '7021', '7022', '7023', '7014', '7015', '7016', '7017', '7018', '7024', '7025', '7026', '7027', '7028', '7029', '7030', '7031', '7032', '7033', '7029', '7030', '7031', '7032', '7033', '7039', '7040', '7041', '7042', '7043', '7044', '7045', '7046', '7047', '7048', '7049', '7050', '7051', '7052', '7053', '7054', '7055', '7056', '7057', '7058', '7059', '7060', '7061', '7062', '7063']
                break
            case '2': //招标
                this.billTypes = ['6021', '6022', '6023', '6025', '6026', '6027', '6028', '6029', '60211', '60231', '60251', '60261',   '60271', '60281', '60291', '60212', '60222', '60232', '60252', '60262', '60272', '60282', '60292', '60213', '60223', '60233', '60253', '60263', '60273', '60283', '60293', '60214', '60224', '60234', '60254', '60264', '60274', '60284', '60294', '60215', '60225', '60235', '60255', '60265', '60275', '60285', '60295', '60216', '60226', '60236', '60256', '60266', '60276', '60286', '60296']
                break
            case '3'://设备
                this.billTypes = ['4011', '4012', '4014', '4015', '4013', '40121', '5011', '5013', '5014', '5015', '5012', '50141', '50111', '50131', '50151', '50121', '3011', '3013', '3017', '3018', '3019', '3020', '3006', '3005', '3014', '3010']
                break
            case '4': //外包方
                this.billTypes = ['6040', '6041', '6042', '6043', '6044', '6045', '6046', '6047', '60401', '6049', '6048', '604101', '60481', '6110']
                break
            case '5': //结算
                this.billTypes = ['3021', '3022', '3023', '3024', '3025', '3026', '3027', '3028', '3029', '3030', '3031', '6095', '6096', '6097', '6098', '6099', '1099', '1098', '1097', '1096', '1095']
                break
            case '6': //周转材料
                this.billTypes = ['6070', '6071', '6072', '6073', '6074', '6075', '6076', '6077', '6078', '6079', '6080', '6081', '6083', '6082', '6084', '6094', '6100']
                break
            case '7': //物资管理
                this.billTypes = ['1001', '1002', '1003', '1004', '1005', '10011', '10021', '10031', '10051', '1006', '1007', '1008', '1009', '1010', '1011', '1012', '1013', '1014', '1015', '1016', '1017', '1018', '1019', '1020', '1021', '1022', '1023', '1036', '1026', '1031', '1032', '1033', '1034', '1035', '1037']
                break
            case '8': //设备台账
                this.billTypes = ['9091', '9092', '9093']
                break
            case '9': //业主合同
                this.billTypes = ['6050', '6051']
                break
            case '10': //工程
                this.billTypes = ['ProjectClass', '6061', '6062', '6063', '6064', 'Unproductive', 'UnproductiveChange', 'StructureListChange', 'PartFirstChange', 'PartProcessChange', 'PartFirstReVision']
                break
            default:
            }
        },
        //清空数据
        setEmpty () {
            this.todoData = []
            this.todoUpcomingData = []
            this.todoDataBack = []
            this.totalPage = 0
        },
        // 待办
        getTodo () {
            showLoading()
            this.getModule('1')  //获取是那个模块
            let params = {
                appId: 'WEB',
                taskClass: '',
                user: this.userInfo.userId
            }
            request.gettodotasks(params).then(res=>{
                // res.forEach(item => {
                //     item.notifyTimeStr = formatDate(
                //         item.notifyTime,
                //         'yyyy-MM-dd'
                //     )
                // })
                this.todoData = this.filterFn(res, this.billTypes, 'billNum')  //标准模式数据
                this.todoUpcomingData = this.filterFn(res, this.billTypes, 'billNum')  //列表模式数据
                this.todoDataBack = this.filterFn(res, this.billTypes, 'billNum')
            }).finally(() => {
                hideLoading()
            })
        },
        //待办分页
        gettodotaskspage () {
            showLoading()
            //this.getModule('1')  //获取是那个模块
            request.gettodotaskspage(this.paginationTodo).then(res=>{
                // res.forEach(item => {
                //     item.notifyTimeStr = formatDate(
                //         item.notifyTime,
                //         'yyyy-MM-dd'
                //     )
                // })
                this.todoDataBack = this.filterFn(res.list, this.billTypes, 'billNum')
                this.todoUpcomingData = res.list, //列表模式数据
                this.totalPage = res.totalCount
            }).finally(() => {
                hideLoading()
            })
        },
        // 已办
        getDone () {
            showLoading()
            this.pagination.userId = this.userInfo.userId
            request.getcompletetaskpagelist(this.pagination).then(res=>{
                // hideLoading()
                // res.data.forEach(item => {
                //     item.notifyTimeStr = formatDate(
                //         item.notifyTime,
                //         'yyyy-MM-dd'
                //     )
                // })
                this.todoData = [...this.todoData, ...res.data] //标准模式数据
                this.todoDataBack = [...this.todoDataBack, ...res.data]
                this.todoUpcomingData = res.data //列表模式数据
                this.totalPage = res.recordsTotal

            }).finally(() => {
                hideLoading()
            })
        },
        //分页
        listByEntity () {
            this.isDone == 1 ? this.gettodotaskspage() : this.getDone()
        },
        //切换模式
        toggle () {
            this.showType = !this.showType
            this.showType
                ? (this.model = '切换到标准模式')
                : (this.model = '切换到列表模式')
        },
        // 点击审核
        onShowAudit (item) {
            this.auditParams.billType = item.billNum
            this.setAuditParams(this.auditParams)
            // 客户端弹窗弹出本地页面
            openAppClient('/exaDialog', '填写审核意见', () => {
                const auditParams = JSON.parse(localStorage.vuex).auditParams
                showLoading()
                publics
                    .audit(auditParams)
                    .then(() => {
                        this.clientPop('suc', '审核成功', this.handleClose)
                    })
                    .finally(() => {
                        hideLoading()
                    })
            })
        },
        //滚动到底部，再加载数据
        lazyLoading () {
            console.log('fff')
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //滚动高度
            let clientHeight = document.documentElement.clientHeight //可视区高度
            let scrollHeight = document.documentElement.scrollHeight //页面高度
            if (scrollTop + clientHeight >= scrollHeight - 10 ) { // 滚动到底部，逻辑代码
                console.log('ddd')
                showLoading()
                this.pagination.filter.pageIndex++
                this.getDone()
            }
        },
        //进入详细页面
        openDetail (item) {
            this.$router.push(item.uri)
            console.log(item)
        },
        details (row) {
            this.$router.push(row.uri)
            console.log(row)
        },
        handleSearch () {
            //支持根据机构、任务名称（待办内容）、单据名称
            if(this.isDone == 1) {
                if(this.searchKey) {
                    this.todoData = this.todoDataBack.filter(item => {
                        return (
                            (item.billName && item.billName.indexOf(this.searchKey) !== -1) ||
                            (item.orgName && item.orgName.indexOf(this.searchKey) !== -1) ||
                            (item.taskDescription && item.taskDescription.indexOf(this.searchKey) !== -1)
                        )
                    })
                    this.todoUpcomingData = this.todoData
                }else{
                    //待办
                    this.getTodo()
                }
            }else{
                this.pagination.filter.pageIndex = 1
                this.pagination.filter.pageSize = 20
                this.pagination.filter.nameLike = this.searchKey
                this.getDone()
            }
        },
        audit () {},
        handleSelectionChange () {},
        onAllAudit () {},
        // 选择已办
        handleSelectionChangeUndo () {}
    }
}
</script>
<style lang="scss" scoped>
.ws-backlog-block {
    border: 1px solid #eee;
    background: #fff;
    margin: 20px 10px 0px 10px;
    border-radius: 7px;
    box-shadow: 1.4px 1.4px 11.6px 1.4px rgba(4, 0, 0, 0.1);
    .ws-backlog-block-head {
        display: flex;
        align-items: center;
        height: 39px;
        border-bottom: 1px solid #f2f2f2;
        position: relative;
    }
    .ws-tubiao {
        width: 20px;
        height: 19px;
        padding-left: 10px;
        margin-right: 7px;
    }
    .ws-title {
        display: block;
        width: calc(100% - 80px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        float: left;
        line-height: 39px;
    }
    .ws-more {
        display: inline-block;
        height: 20px;
        line-height: 20px;
        padding: 0 6px;
        // background: #f57c00;
        color: #ff0000;
        font-size: 12px;
        border-radius: 3px;
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .ws-backlog-block-orgName {
        height: 60px;
        line-height: 30px;
        overflow: hidden;
        padding: 5px 15px;
        font-size: 12px;
        word-break: break-all;
        word-wrap: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #3264d8;
        text-decoration: none;
    }
    .ws-backlog-block-content {
        height: 60px;
        line-height: 30px;
        overflow: hidden;
        padding: 5px 15px;
        font-size: 12px;
        word-break: break-all;
        word-wrap: break-word;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #333;
    }

    .ws-backlog-block-bottom {
        // border-top: 1px solid #eee;
        height: 40px;
        line-height: 40px;
        .ws-project-number,
        .ws-time {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0px 20px 0 10px;
            color: #a9b7b7;
            word-break: keep-all;
            white-space: nowrap;
            max-width: 112px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .l-button {
            background: #fff;
            display: inline-block;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            text-align: center;
            border: solid 1px #dddddd;
            color: #333333;
            padding: 0 15px;
            border-radius: 3px;
            user-select: none;
            margin: 10px 10px 0 0px;
            height: 20px;
            line-height: 20px;
        }
        .ws-blue {
            background: #2e61d7;
            border: 1px solid #2e61d7;
            color: #fff;
        }
    }
}

.container {
    position: relative;
    .ls {
        display: flex;
        flex-wrap: wrap;
        padding-inline-start: 0;
        li {
            margin: 0 0.15% 20px;
            width: 33%;
        }
    }
    .table {
        margin: 10px 0;
    }
}
.e-table {
    min-height: 95vh;
}
</style>
